<template>
  <div class="create-or-edit">
    <!-- pageHeader页头--基础 -->
    <el-page-header @back="goBack" :content="title" />
    <el-button type="primary" class="topSave">保存</el-button>
    <!-- card--基础用法 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- steps---简洁风格的步骤条 -->
        <el-steps :active="currentStep" simple>
          <el-step
            title="基本信息"
            icon="el-icon-edit"
            @click.native="currentStep = 0"
          ></el-step>
          <el-step
            title="课程封面"
            icon="el-icon-upload"
            @click.native="currentStep = 1"
          ></el-step>
          <el-step
            title="销售信息"
            icon="el-icon-picture"
            @click.native="currentStep = 2"
          ></el-step>
          <el-step
            title="秒杀活动"
            icon="el-icon-picture"
            @click.native="currentStep = 3"
          ></el-step>
          <el-step
            title="课程详情"
            icon="el-icon-picture"
            @click.native="currentStep = 4"
          ></el-step>
        </el-steps>
      </div>
      <!-- form典型表单 -->
      <el-form ref="form" :model="course" label-width="80px">
        <div v-show="currentStep === 0">
          <h1>基本信息</h1>
        </div>
        <div v-show="currentStep === 1">
          <h1>课程封面</h1>
        </div>
        <div v-show="currentStep === 2">
          <h1>销售信息</h1>
        </div>
        <div v-show="currentStep === 3">
          <h1>秒杀活动</h1>
        </div>
        <div v-show="currentStep === 4">
          <h1>课程详情</h1>
        </div>
        <el-form-item class="form-btn">
          <el-button @click="nextStep" v-if="currentStep !== 4"
            >下一步</el-button
          >
          <el-button type="primary" v-else>保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "CreateOrEdit",
  //1编辑的时候会有路由传参,路由传参当作属性来存在props,传课程id
  props: {
    courseId: {
      type: [Number, String],
    },
  },
  data() {
    return {
      //步骤条当前步骤
      currentStep: 0,
      //课程表单里信息内容
      course: {},
    };
  },
  created() {
    this.init();
  },
  //方法事件
  methods: {
    //2可能新增或可能编辑
    init() {
      console.log(this.courseId);
    },
    //3页头方法
    goBack() {
      this.$router.go(-1);
    },
    //点击下一步,切换步骤条
    nextStep() {
      this.currentStep = (this.currentStep + 1) % 5;
    },
  },
  //4新建或编辑题目表头
  computed: {
    title() {
      return this.courseId ? "编辑课程" : "新建课程";
    },
  },
};
</script>
<style lang="scss" scoped>
//保存按钮样式
.topSave {
  float: right;
  margin-top: -50px;
}
//题目样式向下
.el-page-header {
  margin-bottom: 20px;
}
//点击步骤条-鼠标变小手
.el-step {
  cursor: pointer;
}
//表单按钮样式
.form-btn {
  text-align: center;
}
</style>
